<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" /> <br />
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
    <my-component01 :title="{ val: '我的组件标题', color: 'red' }"></my-component01>
    <my-component02 :title="{ val: 'Me 组件', color: 'Green' }"></my-component02>
    <my-modal v-model="visible">

    </my-modal>

    <my-provider />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import MyComponent01 from "@/components/MyComponent01.vue"
import MyComponent02 from "@/components/MyComponent02.vue"

import MyProvider from "@/components/MyProvider.vue"
import MyModal from "@/components/MyModal.vue"// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: "HomeView",
  components: {
    MyComponent01,
    MyComponent02,
    MyModal,
    MyProvider
  },
)
</script>
